<template>
  <div class="answers">
      <div class="header_zs_list">
          <h4 class="header_zs_title" v-if="titleData.data.length">党建服务直通车</h4>
          <ul>
              <li class="header_zs_list_item" v-for="item in titleData.data" :key="item.id">
                  <div @click="titleClick(item)" style="width: 100%; display: flex">
                      <div style="width: 30%">
                          <span class="date_style">{{ item.dataTime | dateFormate }}</span>
                      </div>
                      <div style="width: 65%">
                          <span class="header_zs_content">总第{{ item.numberOfPeriods }}期：{{ item.title }}</span>
                      </div>
                  </div>
              </li>
          </ul>
        <h4 class="header_zs_title" v-if="pilotPreachList.data.length">领航宣讲</h4>
          <ul>
              <li class="header_zs_list_item" v-for="(item, index) in pilotPreachList.data" :key="'pilotPreach' + index">
                  <div @click="openNewPage(item)" style="width: 100%; display: flex">
                      <div  style="width: 30%">
                          <span class="date_style">{{ item.dateTime }}</span>
                      </div>
                      <div style="width: 65%">
                          <span class="header_zs_content">{{ item.title }}</span>
                      </div>
                  </div>
              </li>
          </ul>
      </div>
    </div>
</template>

<script>
import getTime from '@/utils/getTime.js'
import {mapState} from "vuex";

export default {
  name: "HeaderZS",
  props: {
    titleData: {
      type: Object,
      default: ()=>{
        return {data:[]}
      }
    },
    pilotPreachList: {
      type: Object,
      default: () => {return {data:[]}}
    }
  },
  methods: {
    // 党建直通车跳转视频页面
    titleClick({numberOfPeriods = '', title = '', dataTime = ''} = {}) {
      const chineseComma = '，'; // 中文逗号
      const data = title.replace(/,/g, chineseComma);
      const encodedData = encodeURIComponent(`${numberOfPeriods},${data},${dataTime}`);
      this.$router.push({
        name: 'PartyBuildingVideoIndex',
        params: {
          data: encodedData
        }
      });
    },
    //领航宣讲跳转视频页面
    openNewPage({ liveContent = '', dateTime = '', videoLinkAddress = '', title = ''} = {}) {
      const chineseComma = '，'; // 中文逗号
      const data = `${liveContent.replace(/,/g, chineseComma)},${title.replace(/,/g, chineseComma)}`;
      const encodedData = encodeURIComponent(`${data},${dateTime},${videoLinkAddress}`);
      this.$router.push({
        name: 'PilotPreach',
        params: {
          data: encodedData
        }
      });
    }
  },
  computed: {
    ...mapState(['robotInfo', 'rhPlate']),
    getTimes() {
      return getTime();
    }
  },
  filters: {
    dateFormate(val) {
      return val.replace('年', '-').replace('月', '-').replace('日', '');
    }
  }
}
</script>

<style scoped>
@import url("~@/assets/css/homeDJHeader/HeaderZS.css");
</style>
